<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局</title>
</head>
<body>

<!--
   1. 多行
   2. 多列
   3.  上左右
   4. 上下左中右
-->

 <h1>1. 多行布局 </h1>

<table border="1" width="90%" height="200">
  <tr><td>第一行</td></tr>
  <tr><td>第二行</td></tr>
  <tr><td>第三行</td></tr>
</table>
<hr>
<h1>2.多列布局</h1>

<hr>


<!--
上
左-右

布局原则:
   先行后列
     2X2
-->
<h1>3.上-左-右 布局</h1>
<table border="1" width="90%" height="200">

    <tr>
        <td colspan="2">标题列</td>
    </tr>
    <tr>
        <td> 左侧导航</td>
        <td> 内容页</td>
    </tr>
</table>
<hr>
<!--
   上
   左-右-中
   下
-->
<h1>4.上-左中右-下 布局</h1>


</body>
</html>